<div class="sys-param-container" [@flyIn]="'active'">

    <div class="example-header">
        <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="搜索">
        </mat-form-field>
    </div>

    <mat-table #table [dataSource]="dataSource">

        <!-- Position Column -->
        <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef>序号</mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.id}}</mat-cell>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef> 名称</mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.name}}</mat-cell>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="value">
            <mat-header-cell *matHeaderCellDef> 值</mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.value}}</mat-cell>
        </ng-container>

        <!-- Checkbox Column -->
        <ng-container matColumnDef="action">
            <mat-header-cell *matHeaderCellDef>操作</mat-header-cell>
            <mat-cell *matCellDef="let row">
                <button mat-icon-button (click)="editPost(row)">
                    <mat-icon class="mat-18">edit</mat-icon>
                </button>
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

    <mat-paginator #paginator
                   [pageSize]="5"
                   [pageSizeOptions]="[5, 10, 20]">
    </mat-paginator>


    <mat-card *ngIf="editOption">
        <mat-card-header>
            <mat-card-title>编辑</mat-card-title>
            <mat-card-subtitle>更改[{{editOption.name}}]的值</mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
            <mat-form-field>
                <input matInput placeholder="请输入值" [(ngModel)]="editOption.value" name="value">
            </mat-form-field>
        </mat-card-content>
        <mat-card-actions>
            <button mat-button  (click)="save($event)">保存</button>
        </mat-card-actions>
    </mat-card>


</div>
